import React, { useState } from 'react'
import '../../App.scss'
import { getlong } from '../../api/index'
import {useNavigate} from 'react-router-dom'
function Long() {
    const Navigate=useNavigate()
    const [from, setfrom] = useState({ 'username': '', "password": '' })
    function chang(e: any) {
        setfrom({
            ...from,
            [e.target.name]: e.target.value
        })
    }

    const Okit = (from: any) => {
        if(from.username===''||from.password===''){
             alert('不能为空')
        }
        //    console.log(from)
        getlong(from).then(resp => {
            const {code,mess,token}=resp.data
            if(code===200){
               alert(mess)
               localStorage.setItem('token',JSON.stringify(token));
               Navigate('/home/my')
            }
        })
    }
    return (
        <div className='Long'>
            <div className="div">
                <div className="divs">
                    <h3>包图网智能硬件平台</h3>
                    <p>一款让设计更美好的智能AI平台</p>
                    <p>
                        <input name='username' value={from.username} onChange={(e) => chang(e)} placeholder='请输入管理员姓名' />
                    </p>
                    <p>
                        <input type='password' name='password' value={from.password} onChange={(e) => chang(e)} placeholder='请输入登录密码' />
                    </p>
                    <button onClick={() => Okit(from)}>登录</button>
                </div>

            </div>
        </div>
    )
}

export default Long
